<template>
  <div>
    <div>
      <div class="head">
        <a @click="back" class="return"></a>
        <span v-if="type == 1">{{$t('UpdatePayPwd.v1')}}</span>
        <span v-if="type == 0">{{$t('UpdatePayPwd.v2')}}</span>
      </div>
      <div class="overlay" style="padding: 20px 10px 10px;">
        <div class="overlay-content scrolling" align="center">
          <div v-if="type == 0">
            <van-cell-group>
              <van-field :placeholder="$t('UpdatePayPwd.v3')" maxlength="6" type="password" v-model.trim="payPwd"/>
            </van-cell-group>
            <van-cell-group>
              <van-field :placeholder="$t('UpdatePayPwd.v4')" maxlength="6" type="password" v-model.trim="payPwd2"/>
            </van-cell-group>
            <div class="btn" style="margin-top:20px;">
              <x-button type="primary" :show-loading="loading" @click.native="sure">{{$t('UpdatePayPwd.v5')}}</x-button>
            </div>
          </div>
          <div v-if="type == 1">
            <van-cell-group>
              <van-field :placeholder="$t('UpdatePayPwd.v6')" maxlength="6" type="password" v-model.trim="payPwd3"/>
            </van-cell-group>
            <van-cell-group>
              <van-field :placeholder="$t('UpdatePayPwd.v7')" maxlength="6" type="password" v-model.trim="payPwd4"/>
            </van-cell-group>
            <van-cell-group>
              <van-field :placeholder="$t('UpdatePayPwd.v8')" maxlength="6" type="password" v-model.trim="payPwd5"/>
            </van-cell-group>
            <div class="text">
              <flexbox>
                <flexbox-item>
                  <div class="flex-demo tar">
                    <router-link to="/UpdateMb" tag="span">{{$t('UpdatePayPwd.v9')}}？</router-link>
                  </div>
                </flexbox-item>
              </flexbox>
            </div>
            <div class="btn" style="margin-top:10px;">
              <x-button type="primary" :show-loading="loading" @click.native="sure2">{{$t('UpdatePayPwd.v5')}}
              </x-button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {Dialog, Toast} from 'vant';
    import {mine, base} from './../utils/api';

    let _this;
    export default {
        data() {
            return {
                type: this.$route.query.type, // 1:修改交易密码 0:设置交易密码
                payPwd: '',
                payPwd2: '',
                payPwd3: '',
                payPwd4: '',
                payPwd5: '',
                show: false,
                show2: false,
                loading: false,
                getCodeText: '获取验证码',
                k: '', // 凭证K值
                v: '' // 凭证V值
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {

        },
        methods: {
            click2() {

            },
            isShow() {
                this.show = true;
            },
            isShow2() {
                this.show2 = true;
            },
            sure() {
                if (!this.payPwd) {
                    Toast(this.$t('UpdatePayPwd.v10'));
                    return false;
                }
                if (this.payPwd.length != 6) {
                    Toast(this.$t('UpdatePayPwd.v11'));
                    return false;
                }
                if (!this.payPwd2) {
                    Toast(this.$t('UpdatePayPwd.v12'));
                    return false;
                }
                if (this.payPwd2.length != 6) {
                    Toast(this.$t('UpdatePayPwd.v13'));
                    return false;
                }
                if (this.payPwd != this.payPwd2) {
                    Toast(this.$t('UpdatePayPwd.v14'));
                    return false;
                }
                this.loading = true;
                base.getCredentials().then(res => {
                    if (res.code == 8008) {
                        this.k = res.data.k;
                        this.v = res.data.v;
                        mine.getTradePassWord({
                            'key': this.k,
                            'encryptedData': this.rsaEncrypt(this.payPwd + ',' + this.payPwd2 + ',' + this.v)
                        }).then(res => {
                            if (res.code == 200) {
                                setTimeout(() => {
                                    this.loading = false;
                                    if (this.$route.query.roid) {
                                        this.$router.go(-1);
                                    } else {
                                        this.$router.push({
                                            path: '/Safety'
                                        })
                                    }
                                }, 500);
                            } else if (res.code == 500) {
                                this.loading = false;
                            }
                            Toast(res.msg);
                        })
                    }
                })
            },
            sure2() {
                if (!this.payPwd3) {
                    Toast(this.$t('UpdatePayPwd.v15'));
                    return false;
                }
                if (this.payPwd3.length != 6) {
                    Toast(this.$t('UpdatePayPwd.v16'));
                    return false;
                }
                if (!this.payPwd4) {
                    Toast(this.$t('UpdatePayPwd.v17'));
                    return false;
                }
                if (this.payPwd4.length != 6) {
                    Toast(this.$t('UpdatePayPwd.v18'));
                    return false;
                }
                if (this.payPwd4 != this.payPwd5) {
                    Toast(this.$t('UpdatePayPwd.v19'));
                    return false;
                }
                this.loading = true;
                base.getCredentials().then(res => {
                    if (res.code == 8008) {
                        this.k = res.data.k;
                        this.v = res.data.v;
                        mine.getUpdatePayPassword({
                            'key': this.k,
                            'encryptedData': this.rsaEncrypt(this.payPwd3 + ',' + this.payPwd4 + ',' + this.payPwd5 + ',' + this.v)
                        }).then(res => {
                            if (res.code == 200) {
                                setTimeout(() => {
                                    this.loading = false;
                                    if (this.$route.query.roid) {
                                        this.$router.push({
                                            path: this.$route.query.roid
                                        })
                                    } else {
                                        this.$router.push({
                                            path: '/Safety'
                                        })
                                    }
                                }, 500);
                            } else if (res.code == 500) {
                                this.loading = false;
                            }
                            Toast(res.msg);
                        })
                    }
                })
            },
            back() {
                if (this.$route.query.roid) {
                    if(this.$route.query.typeName){
                        this.$router.push({
                            path: this.$route.query.roid,
                            query: {
                                type: this.$route.query.type_c,
                                typeName: this.$route.query.typeName
                            }
                        })
                    }else{
                        this.$router.push({
                            path: this.$route.query.roid
                        })
                    }
                } else {
                    this.$router.push({
                        path: '/Safety'
                    })
                }
            }
        },
        watch: {
            payPwd: function () {
                this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 只能输入数字
            },
            payPwd2: function () {
                this.payPwd2 = this.payPwd2.replace(/[^\d]/g, ''); // 只能输入数字
            },
            payPwd3: function () {
                this.payPwd3 = this.payPwd3.replace(/[^\d]/g, ''); // 只能输入数字
            },
            payPwd4: function () {
                this.payPwd4 = this.payPwd4.replace(/[^\d]/g, ''); // 只能输入数字
            },
            payPwd5: function () {
                this.payPwd5 = this.payPwd5.replace(/[^\d]/g, ''); // 只能输入数字
            }
        }
    }
</script>

<style lang="less" scoped>
  .head ~ .overlay {
    top: 44px;
  }

  .van-cell {
    background-color: #333952;
    color: #FFFFFF;
    font-size: 15px;
    padding: 15px;
  }

  [class*=van-hairline] {
    position: unset;
    border-bottom: 2px solid #2c3145;
  }

  /deep/ .weui-btn_primary {
    background: #3fb776 !important;
  }

  /deep/ .van-button--primary {
    background: #3fb776 !important;
    border: 1px solid #3fb776;
  }

  .van-hairline--top-bottom::after {
    border: 0;
  }

  .btn {
    padding: 0 10px 0px;
  }

  /deep/ .van-field__control {
    color: #FFFFFF;
  }

  /deep/ input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(244, 244, 244, 0.3) !important;
  }

  /deep/ input::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(244, 244, 244, 0.3) !important;
  }

  /deep/ input:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(244, 244, 244, 0.3) !important;
  }

  /deep/ input:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(244, 244, 244, 0.3) !important;
  }

  /deep/ .van-cell:not(:last-child)::after {
    border: 0;
  }

  .text {
    padding: 20px;
    text-align: center;
    font-size: 13px;
  }
</style>
